class Snack{
    head:HTMLElement
    bodies:HTMLCollection
    element:HTMLElement
    constructor(){
        //获取头部
        this.head = document.querySelector('.head')!
        //获取身体
        this.bodies = document.getElementById('snack')!.getElementsByTagName('div')
        //获取snack容器
        this.element = document.querySelector('#snack')!
    }

    //获取头部的位置
    get X ()
    {
        return this.head.offsetLeft
    }

    get Y ()
    {
        return this.head.offsetTop
    }

    //设置头部的位置
    set X(value){
        //当位置未发生改变则不进行赋值
        if(this.X === value)
        {
            return
        }

        //限制蛇移动的范围
        if(value < 0 || value > 290)
        {
            throw 'GAME OVER ! 游戏结束！'
        }

        //解决蛇掉头问题
        if(this.bodies[1] && value === (this.bodies[1] as HTMLElement).offsetLeft)
        {
            //进入判断就表示调头了
            if(value > this.X)
            {
                value -= 20
            }else
            {
                value += 20
            }
        }

        this.moveBody()
        this.head.style.left = value + 'px'
        this.checkHead()
    }   

    set Y(value){
        //当位置未发生改变则不进行赋值
        if(this.Y === value)
        {
            return
        }

        //限制蛇移动的范围
        if(value < 0 || value > 290)
        {
            throw 'GAME OVER ! 游戏结束！'
        }

         //解决蛇掉头问题
         if(this.bodies[1] && value === (this.bodies[1] as HTMLElement).offsetTop)
         {
             //进入判断就表示调头了
             if(value > this.Y)
             {
                 value -= 20
             }else
             {
                 value += 20
             }
         }

        this.moveBody()
        this.head.style.top = value + 'px'
        this.checkHead()
    }   

    addBody(){
        this.element.insertAdjacentHTML('beforeend','<div></div>')
    }

    //添加身体移动的方法
    /* 
        实现的逻辑:
            第四节的位置 --> 第三节的位置
            第三节的位置 --> 第二节的位置
            第二节的位置 --> 第一节的位置
    */
    moveBody(){
        for(let i = this.bodies.length-1; i>0; i--)
        {
            let left = (this.bodies[i-1] as HTMLElement).offsetLeft;
            let top = (this.bodies[i-1] as HTMLElement).offsetTop;
            (this.bodies[i] as HTMLElement).style.left = left + 'px';
            (this.bodies[i] as HTMLElement).style.top = top + 'px';

        }
    }

    //检查是否撞头
    checkHead(){
        for(let i = 1;i<this.bodies.length;i++)
        {
            if(this.X === (this.bodies[i] as HTMLElement).offsetLeft && this.Y === (this.bodies[i] as HTMLElement).offsetTop)
            {
                // 如果进入了判断就表示撞到自己了
                throw '撞到自己了！！游戏结束！！'
            }
        }
}

}

export default Snack
